<script setup>
import { ref } from 'vue';

let counter = ref(0)

function descrease() {
    --counter.value
}

function increase() {
    ++counter.value
}

</script>

<template>
    <h2>{{ counter }}</h2>

    <!-- v-on:事件名称="事件处理" -->
    <button v-on:click="--counter">-</button>
    <button v-on:click="++counter">+</button>

    <hr>

    <!-- 语法糖写法 -->
    <button @click="descrease">-</button>
    <button @click="increase">+</button>
</template>

<style lang="css" scoped></style>